<template>
    <div class="fungroup-wrap">
        <div class="type-wrap phoneBac">
            <div class="fungroup-header">
                <div class="fungroup-title">
                    <span>
                        共性产品
                    </span>
                    <div class="back" @click="close">
                        <i class="el-icon-close"></i>
                    </div>
                </div>
                <div class="header-line"></div>
                <div class="type-list">
                    <el-checkbox-group v-model="nowChoice">
                        <div
                            v-for="(item, index) in btnArr"
                            class="type-item"
                            :class="{
                                'is-choice': nowChoice[0] === item.toolTitle,
                            }"
                            :key="index"
                        >
                            <el-checkbox
                                @change="
                                    checked => {
                                        $store.state.isPhone
                                            ? phoneBtnClick(item, checked)
                                            : btnClick(item, checked);
                                    }
                                "
                                :label="item.toolTitle"
                            >
                                {{ item.toolTitle }}
                            </el-checkbox>
                        </div>
                    </el-checkbox-group>
                    <!-- <el-radio-group v-model="nowChoice">
                        <el-radio
                            v-for="(item, index) in btnArr"
                            @change="btnClick(item)"
                            :key="index"
                            :label="item.toolTitle"
                            >{{ item.toolTitle }}</el-radio
                        >
                    </el-radio-group> -->
                </div>
            </div>
        </div>
        <OptionPanel ref="optionPanel" v-show="nowChoice.length > 0 && optionShow"></OptionPanel>
    </div>
</template>
<script>
import OptionPanel from './optionPanel';
export default {
    name: 'funGroup',
    components: {
        OptionPanel,
    },
    data() {
        return {
            nowChoice: [],
            btnArr: [
                {
                    toolTitle: 'NDVI',
                    fun_NDVI: 'NDVIFun',
                    clearFun: 'clearNDVI',
                },
                {
                    toolTitle: 'LAI',
                    fun_LAI: 'LAIFun',
                    clearFun: 'clearLAI',
                },
                {
                    toolTitle: 'REF',
                    fun_REF: 'REFFun',
                    clearFun: 'clearREF',
                },
                {
                    toolTitle: 'FVC',
                    fun_FVC: 'FVCFun',
                    clearFun: 'clearFVC',
                },
                {
                    toolTitle: 'ALBEDO',
                    fun_ALBEDO: 'AlbedoFun',
                    clearFun: 'clearAlbedo',
                },
            ],
            optionShow: false,
        };
    },
    methods: {
        phoneBtnClick(item, checked) {
            if (this.nowChoice.length > 1) {
                this.nowChoice.splice(0, 1);
            }
            this.$parent.checkedLAI = this.nowChoice[0] === 'LAI' ? true : false;
            if (checked) {
                this.btnArr.forEach(element => {
                    if (element.toolTitle !== item.toolTitle) {
                        this[element.clearFun]();
                    }
                });
                this[item['fun_' + item.toolTitle]]();
                this.times = this.$parent.times;
                // 如果绘制完毕并点击确认按钮切换功能时刷新统计图
                if (this.$refs.optionPanel.chartsShow) {
                    this.$refs.optionPanel.addCharts();
                }
            } else {
                this[item.clearFun]();
                this.$refs.optionPanel.drawFun.deleteArea(true);
            }
            this.optionShow = true;
            $('.type-wrap').css('display', 'none');
            $('.fungroup-option').css('display', 'none');
        },
        btnClick(item, checked) {
            if (this.nowChoice.length > 1) {
                this.nowChoice.splice(0, 1);
            }
            if (checked) {
                this.optionShow = true;
                this.$refs.optionPanel.choiceDate = [];
                this.btnArr.forEach(element => {
                    if (element.toolTitle !== item.toolTitle) {
                        this[element.clearFun]();
                    }
                });
                this[item['fun_' + item.toolTitle]]();
                this.times = this.$parent.times;
                // 如果绘制完毕并点击确认按钮切换功能时刷新统计图
                if (this.$refs.optionPanel.chartsShow) {
                    this.$refs.optionPanel.addCharts();
                }
            } else {
                this[item.clearFun]();
                this.$refs.optionPanel.drawFun.deleteArea(true);
            }
        },
        // REF方法
        REFFun() {
            this.$parent.ctrlSeqImgsDis(
                '',
                // 'GFWFVTIMESERIES-PNG-4326',
                'REF_HistoricalImage-PNG-4326',
                'http://36.112.11.166:38310'
            );
        },
        getTimes() {
            return this.$parent.times;
        },
        // LAI方法
        LAIFun() {
            this.$parent.ctrlSeqImgsDis(
                '',
                // 'LAINOBLACKTIMESERIES-PNG-4326',
                'LAI_HistoricalImage-PNG-4326',
                'http://36.112.11.166:38310'
            );
        },
        // NDV方法
        NDVIFun() {
            this.$parent.ctrlSeqImgsDis(
                '',
                // 'NDVINOBLACKTIMESERIES-PNG-4326',
                'NDVI_HistoricalImage-PNG-4326',
                'http://36.112.11.166:38310'
            );
        },
        FVCFun() {
            this.$parent.ctrlSeqImgsDis(
                '',
                'FVC_HistoricalImage-PNG-4326',
                'http://36.112.11.166:38310'
            );
        },
        AlbedoFun() {
            this.$parent.ctrlSeqImgsDis(
                '',
                'Albedo_HistoricalImage-PNG-4326',
                'http://36.112.11.166:38310'
            );
        },
        // 清空REF
        clearREF() {
            this.$parent.ctrlSeqImgsDis('ctrlSeqImgsDis');
        },
        // 清空LAI
        clearLAI() {
            this.$parent.ctrlSeqImgsDis('ctrlSeqImgsDis');
        },
        // 清空NDV
        clearNDVI() {
            this.$parent.ctrlSeqImgsDis('ctrlSeqImgsDis');
        },
        clearFVC() {
            this.$parent.ctrlSeqImgsDis('ctrlSeqImgsDis');
        },
        clearAlbedo() {
            this.$parent.ctrlSeqImgsDis('ctrlSeqImgsDis');
        },
        close() {
            this.$parent.clearGroup();
        },
        // 点击左侧按钮清除复原
        clearAll() {
            if (this.nowChoice.length > 0) {
                const btn = this.btnArr.find(element => {
                    return element.toolTitle === this.nowChoice[0];
                });
                this[btn.clearFun]();
            }
            this.$refs.optionPanel.drawFun.deleteArea(true);
        },
    },
    beforeDestroy() {
        this.clearAll();
    },
};
</script>
<style lang="scss" scope>
@import 'theme/css/funGroupStyle.scss';
</style>
